<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
/**
 * g-ratings allows users to rate items.
 *
 * Example:
 *
 *     <g-ratings value="3"></g-ratings>
 *
 * By default g-ratings shows 5 stars but can be configured using "count" attribute:
 *
 *     <g-ratings value="3" count="10"></g-ratings>
 *
 * @class g-ratings
 */
-->
<polymer-element name="g-ratings" attributes="count value">
  <template>
    <style>
      @host {
        * {
          white-space: nowrap;
          -webkit-user-select: none;
          -moz-user-select: none;
        }
      }

      .star {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-image: url('images/star_blank.png');
        cursor: default;
      }
      
      .star.full {
        background-image: url('images/star_full.png');
      }
    </style>
    <template repeat="{{stars}}">
      <span index="{{index}}" class="star {{starClass}}" touch-action="none" on-tap="starClick"></span>
    </template>
  </template>
  <script>
    Polymer('g-ratings', {
      /**
       * Number of stars to display.
       *
       * @attribute count
       * @type number
       * @default 5
       */
      count: 5,
      /**
       * Number of selected stars.
       *
       * @attribute value
       * @type number
       * @default 0
       */
      value: 0,
      ready: function() {
        this.countChanged();
      },
      countChanged: function() {
        this.stars = [];
        for (var i = 0; i < this.count; i++) {
          this.stars.push({index: i});
        }
        this.valueChanged();
      },
      valueChanged: function() {
        this.stars && this.stars.forEach(function(s, i) {
          s.starClass = i < this.value ? 'full' : '';
        }.bind(this));
      },
      starClick: function(inEvent, inDetail, inSender) {
        var s = inSender.templateInstance.model;
        this.value = s.index + (s.starClass == 'full' ? 0 : 1);
      }
    });
  </script>
</polymer-element>
